<template>
  <div class="home">
    <count-to :start="10" :end="9999"></count-to>
    <count-to ref="counter" :end="888" @on-click="handleClick"></count-to>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Emit } from 'vue-property-decorator';
  import CountTo from '@/components/CountTo'

  @Component({
    name: 'HomePage',
    components: {
      CountTo
    }
  })
  export default class Home extends Vue {
    protected mounted() {
      setInterval(() => {
        // 这样每2秒钟这里会更新一次，更新的值是随机的
        (this.$refs.counter as CountTo).update(Math.random() * 10000)
        console.log('counter')
      }, 2000)
    }

    public handleClick(event: any) {
      // console.log("TCL: Home -> handleClick -> event", event)
      console.log('触发了自定义事件')
    }
  }
</script>
